<template>
    <header>
        <div class="header">
            <div style='height:80px'><img src="/img/logo2018.png" alt=""></div>
            <div class="city">{{city}}</div>
            <div>
                <ul class="daohang">
                    <li v-for="str,i of header" :key="i"><router-link :to="herf[i]">{{str}}</router-link></li>
                </ul>
            </div>
            <div class="right">
                <router-link to="/register" :style="{width:(login?'125px':'60px')}"><span>.</span> {{login?userName:'注册'}}</router-link>
                 <router-link to="/login" :style="{display:(!login?'inline-block':'none')}">登录</router-link>
            </div>
        </div>
    </header>
    
</template>
<script>
import {mapActions,mapState,mapMutations} from 'vuex'
export default {
    computed:{
        ...mapState(['city','login','userName'])
    },
    data(){
        return{
            header:['首页','立即找房','发布房源','找室友','下载APP','伙伴登录'],
            herf:['/','/search','/publish','/shiyou','/download',''],
            city1:'',
        }
    },
    methods:{
         ...mapActions(['plogin']),
    },
    mounted(){

        console.log(this.login,this.userName,this.city)
        if(!this.city){
        
     AMap.plugin('AMap.Geolocation', ()=> {
        var geolocation = new AMap.Geolocation({
        });
        geolocation.getCurrentPosition((status,result)=>{
            var a =result.addressComponent.city
           var a=  a.substr(0,a.length-1);
           this.city1 = a;
           console.log(a)
             this.plogin( this.city1);
        });
    });}
    }
}
</script>
<style scoped >
body header>.header::after{
    content: '';
    display: block;
    clear: both;
}
body header>.header{
    height: 80px;
    margin: 0 auto;
    width: 1190px;
    background-color: #fff;
    line-height: 80px;
}
.header>div{
    float: left;
    /* background-color: #fff; */
}
body header div div{
    color:black;
    width:auto;
    background-color: #fff;
    /* height: auto; */
}
.header .city{
   width: 90px;
    height: 34px;
    line-height: 34px;
    margin: 23px 0;
    margin-left: 15px;
    text-align: center;
    border: 1px solid black;
    border-radius: 20px;
    background-image: url(/img/dizhi3x.png);
    background-repeat: no-repeat;
    background-position: 19px 8px;
    text-indent: 19px;
      font-size:14px
}
a{
    text-decoration: none;
}
.daohang>li{
    float: left;
    width: 120px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    list-style:none;
  
}
.daohang>li>a{
    display: inline-block;
    height: 60px;
    text-decoration: none;
    color:black
}
.daohang>li>a:hover{
border-bottom: 3px solid #e8323f;
color:#757676;
}
.header .right{
    float: right;
}
.header .right span{
    display: inline-block;
    width: 15px;
    background-image: url('/img/css_sprites.png');
    background-position:-81px -55px;
    height: 15px;
    line-height: 15px;
    color:transparent;
}
.header .right>a{
    color:black;
    display: inline-block;
    width: 60px;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
}
</style>